<template>
    <el-table
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="[pay_typ, currency_cod]"
        :max-height="tableHeight"
        table-layout="auto"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <el-table-column type="selection" width="55" :align="'center'" />
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :fixed="col.fixed"
                :formatter="col.formatter"
                :type="col.type"
                :width="col.width"
            >
                <template
                    v-if="col.formFieldItemType === 'boolean'"
                    #default="scope"
                >
                    <el-switch
                        v-model="scope.row[`${col.prop}`]"
                        :active-value="'Y'"
                        :inactive-value="'N'"
                    />
                </template>
            </el-table-column>
        </template>
    </el-table>
    <el-button-group class="bg">
        <el-button class="btn" type="primary"  @click="onRefresh"
            >刷新</el-button
        >
    </el-button-group>
</template>
<script setup lang="ts" name="CategorySurplus">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElTable, FormRules } from 'element-plus';
// import { Delete, Plus, Search } from '@element-plus/icons-vue';
import {
    isEmpty,
    forEach,
    forEachRight,
    includes,
    findIndex,
    omit,
} from 'lodash';
import NormalForm from '@/components/forms/NormalForm.vue';

import type { CategorySurplusModel } from '@/common/types/business';
import {
    tableDefaultAttribute,
    useTableInfo,
    tableColumnDefault,
} from '@/hooks/useTable';
import type { FormFieldItem, QueryItem, TableColumn } from '@/common/types/app';
import { Request } from '@/app/request';
import {
    initObjectProperty,
    pickFormFromTable,
    pickQueryFromTable,
    transFormatter,
    formatDate,
} from '@/common/tools';
import { tableMaxHeightAdjust } from '@/common/const';
import { useAppStore } from '@/store/app';
const {
    currency,
    category,
} = useAppStore();
const tableRef = ref<InstanceType<typeof ElTable>>();
const tableData = ref<Array<CategorySurplusModel>>([]);
const paramData = reactive<CategorySurplusModel>({});
const tableHeight = ref(100);
const formOptions = reactive<{
    labelWidth?: string;
    labelPosition?: string;
}>({});

const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'currency_cod') {
        data = currency;
    } else if (column['property'] === 'pay_typ') {
        data = category;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};

const tableColumns = reactive<TableColumn[]>([
    
    {
        ...tableColumnDefault,
        order: 5,
        prop: 'pay_typ',
        label: '资金账号',
        formatter: onFormatter,
        fixed: 'left',
        sortable: 'true',
        formFieldItemType: 'single',
        optionalValues: category,
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'currency_cod',
        label: '货币',

        sortable: 'true',
        formFieldItemType: 'single',
        optionalValues: currency,
        width: 100,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'surplus',

        label: '金额',
        sortable: 'custom',
        width: 150,
    },

]);



const onRefresh = async () => {
    // console.log('参数', paramData);

    const req = new Request('资金账号盘存', { });
    const r = await req.post();

    tableData.value.length = 0;

    if (!isEmpty(r.obj)) {
        tableData.value = r.obj;
    }
};
const {
    currentPage,
    orders,
    pageSize,
    totalnum,
    handleSizeChange,
    handleCurrentChange,
    handleSortChange,
} = useTableInfo(onRefresh);
onMounted(() => {
    onRefresh();
    tableHeight.value =
        window.innerHeight -
        Math.ceil(tableRef.value?.$el.getBoundingClientRect().bottom) +
        tableMaxHeightAdjust;
    // alert(tableHeight.value);
});
</script>
<style lang="scss" scoped>
.bg {
    margin-top: 10px;

    .btn {
        margin-right: 10px;
    }
}

.page {
    float: right;
    margin-top: 10px;
}
</style>
